<template>
    <div class="search-container">
        <div class="form">
            <p class="title">首页查询</p>
            <div class="input-box">
                <el-input v-model="search.value" class="input-with-select">
                    <el-select v-model="search.type" slot="prepend" class="form-select" placeholder="请选择">
                        <el-option label="患者姓名" :value="0"></el-option>
                        <el-option label="病案号" :value="1"></el-option>
                        <el-option label="住院号" :value="2"></el-option>
                    </el-select>
                    <el-button slot="append" class="form-btn" @click="getMRList">查询</el-button>
                </el-input>
            </div>
        </div>
        <div class="list">
            <div class="item" v-for="(item, index) in MRList" :key="index" @click="getMR(item)">
                <p>患者姓名：{{item.xm}}</p>
                <p>出院时间：{{item.cysj}}</p>
                <p>住院号：{{item.zyh}}</p>
                <p>病案号：{{item.bah}}</p>
            </div>
        </div>
        <div class="tips">
            <h3>注：</h3>
            <p></p>
            <h3>1.必填项：</h3>
            <p></p>
            <p>*标注为《住院病案首页数据质量管理与控制指标（2016年版）》中要求必填项，必填项不能为空项，每份住院病案首页中均要填写，没有可填写内容时填写“-”。</p>
            <p></p>
            <h3>2.条件必填项：</h3>
            <p></p>
            <p>除必填项外其余填写均为条件必填项，即在诊疗中出现该条件时必须要填写的项。例如：</p>
            <p>患者有其他疾病时，其他诊断及疾病编码，入院病情项为必填。</p>
            <p>患者实施了手术及操作时，手术及操作名称，手术及操作编码，手术及操作日期，手术级别，手术及操作医师，切口愈合等级，麻醉方式，麻醉医师项为必填。</p>
            <p>详细填写说明参见卫健委公布《住院病案首页部分项目填写说明》。</p>
        </div>
    </div>
</template>

<script>
    import {searchMRList} from '@/api/search'

    export default {
        name: 'search',
        data () {
            return {
                search: {
                    type: 2,
                    value: ''
                },
                // 病案查询列表
                MRList: []
            }
        },
        created () {
            this.getMRList()
        },
        mounted () {
        },
        methods: {
            /**
             * 查询左侧病案列表
             */
            getMRList () {
                let params = {
                    kind: this.search.type,
                    keyword: this.search.value
                }
                /* eslint-disable */
                if (native.getConfig().adapterServer) {
                /* eslint-enable */
                    searchMRList(params).then(res => {
                        this.MRList = res
                    })
                }
            },
            /**
             * 查询病案信息
             * @param row item数据
             */
            getMR (row) {
                this.$emit('clickMR', row.id)
            }
        }
    }
</script>

<style scoped lang="scss">
    .search-container {
        width: 252px;
        overflow-y: auto;
        padding: 10px 6px 10px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        margin: 0 6px;
        .form {
            .title {
                font-size: 14px;
                color: #333;
                margin: 0 0 4px 0;
            }
            .input-box {
                display: flex;
            }
            .input-with-select {
                width: 228px;
            }
            .form-select {
                width: 70px;
                > > > .el-input__inner {
                    padding-left: 4px;
                    padding-right: 14px;
                }
                > > > .el-input__suffix {
                    right: 0;
                    .el-input__icon {
                        width: 14px;
                    }
                }
            }
            .form-btn {
                width: 40px;
                height: 28px;
                text-align: center;
                padding: 0;
            }
            > > > .el-input-group__append, > > > .el-input-group__prepend {
                background: transparent;
            }
        }
        .list {
            height: 317px;
            overflow-y: auto;
            border: 1px solid #eeeeee;
            padding: 4px;
            margin-top: 8px;
            .item {
                padding: 2px;
                border-bottom: 1px solid #eeeeee;
                cursor: pointer;
                &:last-child {
                    border: 0;
                }
                p {
                    margin: 0;
                    font-size: 12px;
                    line-height: 18px;
                }
            }
        }
        .tips {
            max-height: calc(100vh - 317px - 51px - 20px - 12px - 10px);
            overflow-y: auto;
            &::-webkit-scrollbar {
                display: none;
            }
            h3 {
                font-size: 12px;
                line-height: 20px;
                margin: 0;
                font-weight: normal;
            }
            p {
                font-size: 12px;
                line-height: 20px;
                margin: 0;
                text-indent: 2em;
            }
        }
    }
</style>
